<html>

<head>
  <title>双向选择列表</title>
  <style type="text/css">
    body {
      text-align: center;
    }

    p {
      text-align: center;
    }

    #wrap {
      width: 800px;
      margin: 0 auto;
      text-align: left;
      position: relative;
    }

    #buttonArea {
      width: 100px;
      float: left;
    }

    #leftPanel {
      width: 350px;
      float: left;
    }

    #rightPanel {
      width: 350px;
      float: left;
    }

    #footer {
      clear: both;
    }
  </style>
  <script type="text/javascript">
    function loadAllUnselected() {
      var unassignedTable = document.getElementById("unassignedTable");
      //!!!!!!!!!!!!!!
      var rowsUnsellected = unassignedTable.childNodes[0].childNodes;
      document.getElementById("unselected").value = "";
      for (i = 0; i < rowsUnsellected.length; ++i) {
        if (rowsUnsellected[i].tagName == "TR" && rowsUnsellected[i].getAttribute("id") != "") {
          document.getElementById("unselected").value =
            document.getElementById("unselected").value + '||' + rowsUnsellected[i].getAttribute("id");
        }
      }
      var assignedTable = document.getElementById("assignedTable");
      //!!!!!!!!!!!
      var rowsSelected = assignedTable.childNodes[0].childNodes;
      for (i = 0; i < rowsSelected.length; ++i) {
        if (rowsSelected[i].tagName == "TR" && rowsSelected[i].getAttribute("id") != "") {
          document.getElementById("unselected").value =
            document.getElementById("unselected").value + "||" + rowsSelected[i].getAttribute("id");
        }
      }
    }
    //汇总所有已分配和未非配的数据
    function countAllIds() {
      var unassignedTable = document.getElementById("unassignedTable");
      //!!!!!!!!!!!!!!!!!!
      var rowsUnas = unassignedTable.childNodes[0].childNodes;
      document.getElementById("unassignedids").value = "";
      for (var i = 0; i < rowsUnas.length; ++i) {
        if (rowsUnas[i].tagName == "TR" && rowsUnas[i].getAttribute("id") != "") {
          document.getElementById("unassignedids").value =
            document.getElementById("unassignedids").value + "||" + rowsUnas[i].getAttribute("id");
        }
      }

      var assignedTable = document.getElementById("assignedTable");

      //!!!!!!!
      var rowsas = assignedTable.childNodes[0].childNodes;
      document.getElementById("assignedids").value = "";
      for (var i = 0; i < rowsas.length; ++i) {
        if (rowsas[i].tagName == "TR" && rowsas[i].getAttribute("id") != "")
          document.getElementById("assignedids").value =
            document.getElementById("assignedids").value + "||" + rowsas[i].getAttribute("id");
      }
    }

    //将选中的行移至未分配表
    function moveToLeft() {
      var ids = document.getElementById("selected").value;
      var idArray = ids.split("||");
      for (i = 0; i < idArray.length; ++i) {
        if (idArray[i] != "") {
          var moveObj = document.getElementById(idArray[i]);
          add(moveObj, "unassignedTable");
        }
      }
      countAllIds();
    }

    //将选中的行移至分配表
    function moveToRight() {
      var ids = document.getElementById("selected").value;
      var idArray = ids.split("||");
      for (i = 0; i < idArray.length; ++i) {
        if (idArray[i] != "") {
          var moveObj = document.getElementById(idArray[i]);
          add(moveObj, "assignedTable");
        }
      }
      countAllIds();
    }

    //指定的表格中添加行
    function add(rowObj, tableObj) {
      var table = document.getElementById(tableObj);
      var newRow = table.insertRow(table.rows.length);
      newRow.replaceNode(rowObj);
    }

    //删除已选择的行
    function removeRow(obj) {
      var clickedRow = obj;
      while (clickedRow != "TR") {
        clickedRow = clickedRow.parentNode;
      }
      clickedRow.parentNode.removeChild(clickedRow);
    }

    //当鼠标点击时切换背景色与设置值
    function changeBackground(obj) {
      if (obj.style.background == "silver") {
        obj.style.background = "#ffffff";
        document.getElementById("unselected").value = document.getElementById("unselected").value + "||" + obj.getAttribute("id");
        document.getElementById("selected").value = document.getElementById("selected").value.replace("||" + obj.getAttribute("id"), '');
      }
      else {
        if (document.getElementById("selected").value.indexOf(obj.getAttribute("id")) < 0) {
          document.getElementById("selected").value =
            document.getElementById("selected").value + "||" + obj.getAttribute("id");
          document.getElementById("unselected").value =
            document.getElementById("unselected").value.replace("||" + obj.getAttribute("id"), '');
        }
        obj.style.background = "silver";
      }
    }
  </script>
</head>


<body οnlοad="loadAllUnselected();countAllIds();">
  <div id="wrapper">
    <div>
      <p>双向选择列表</p>
    </div>
    <div id="leftPanel">
      <p>
      <table id="unassignedTable" width="350" border="1" cellpadding="0" cellspacing="0">
        <tr>
          <th colspan="3">未分配</th>
        </tr>
        <tr>
          <th>列1
          </th>
          <th>列2
          </th>
          <th>列3
          </th>
        </tr>
        <tr id="a" οnclick="changeBackground(this)">
          <td>A</td>
          <td>A</td>
          <td>A</td>
        </tr>
        <tr id="b" οnclick="changeBackground(this)">
          <td>B</td>
          <td>B</td>
          <td>B</td>
        </tr>
      </table>
      </P </div>

      <div id="buttonArea">
        <p>
        <p>
          <input type="button" οnclick="moveToRight();" value=">>" />
        </p>
        <p>
          <input type="button" οnclick="moveToLeft();" value="<<" />
        </p>
        </p>
      </div>

      <div id="rightPanel">
        <p>
        <table id="assignedTable" width="350" border="1" cellpadding="0" cellspacing="0">
          <tr>
            <th colspan="3">已分配</th>
          </tr>
          <tr>
            <th>列1
            </th>
            <th>列2
            </th>
            <th>列3
            </th>
          </tr>

          <tr id="c" οnclick="changeBackground(this)">
            <td>C</td>
            <td>C</td>
            <td>C</td>
          </tr>
        </table>
        </p>
      </div>
    </div>
    <p>
      未选择:<input id="unselected" type="text" value="" />   
      已选择:<input id="selected" type="text" value="" />
    </p>
    <p>
      未分配:<input id="unassignedids" type="text" value="" />   
      已分配:<input id="assignedids" type="text" value="" />
    </p>
</body>

</html>